import React, { useRef } from "react";

interface DebouncedButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}
function DebouncedButton({ onClick, children }: DebouncedButtonProps) {
  const timeoutIDRef = useRef<NodeJS.Timer>();

  return (
    <button
      onClick={() => {
        clearTimeout(timeoutIDRef.current);
        timeoutIDRef.current = setTimeout(onClick, 2000);
      }}
    >
      {children}
    </button>
  );
}

function Dashboard() {
  return (
    <>
      <DebouncedButton onClick={() => alert("宇宙飞船已发射！")}>发射宇宙飞船</DebouncedButton>
      <DebouncedButton onClick={() => alert("汤煮好了！")}>煮点儿汤</DebouncedButton>
      <DebouncedButton onClick={() => alert("摇篮曲唱完了！")}>唱首摇篮曲</DebouncedButton>
    </>
  );
}

export default Dashboard;
